import locale from './locale';
import {
  createInbizSchema,
  createBaseSchema,
  createComponentStyleSchema,
  createDecoratorStyleSchema,
  createBizStyleSchema,
  createControllerSchema,
} from '@inbiz/setters';

export const defaultProps = {
  headerStyle: {
    icon: {
      type: 'icon-daohang',
    },
  },
  style: {
    padding: '0px 20px 20px 20px',
  },
  view: 'grid',
  showType: 'grid',
  itemWidth: 200,
  rowCount: 5,
  mobilerowCount: 2,
  colHeight: 100,
  horizontalGutter: 20,
  verticalGutter: 20,
  position: 'left',
  navList: [],
  contentType: 1,
  className: '',
  radius: 10,
  gridHeight: 75,
  shadow: false,
  lineHeight: 44,
  fontSize: 16,
  titleColor: 'rgba(0,0,0,1)',
  descFontSize: 14,
  descColor: 'rgba(235,235,235,1)',
  textAlign: 'left',
  cardBackground: { backgroundColor: "rgba(255,255,255,1)" },
  cardBoxshadow: '0px 2px 4px 0px rgba(0,0,0,0.12)',
  hoverBackground: { backgroundColor: "rgba(245,245,245,1)" },
  hoverBoxshadow: '0px 2px 4px 0px rgba(0,0,0,0.12)',
};

export const defaultH5Props = {
  headerStyle: {
    icon: {
      type: 'icon-daohang',
    },
  },
  style: {
    padding: '0 0 0 0',
  },
  showType: 'grid',
  itemWidth: 200,
  rowCount: 3,
  mobilerowCount: 2,
  colHeight: 100,
  horizontalGutter: 20,
  verticalGutter: 20,
  contentType: 1,
  dataSource1: [
    {
      id: '10002',
      isEdit: true,
      isHide: true,
      isDel: true,
      title: '导航1',
      icon: { type: 'icon-ProcessLog', size: 24 },
      externalAddress: false,
      titleColor: 'rgba(0,0,0,1)',
      page: '',
      linkAddress: '',
      cardStyle: false,
      nameFontSize: 16,
      nameColor: 'rgba(0,0,0,1)',
      describeFontSize: 14,
      describeColor: 'rgba(235,235,235,1)',
      cardBackground: {
        backgroundColor: "rgba(255,255,255,1)"
      },
      cardBoxshadow: '0px 2px 4px 0px rgba(0,0,0,0.12)',
      cardBorder: undefined,
    },
  ],
  className: '',
  radius: 16,
  gridHeight: 75,
  shadow: false,
  lineHeight: 44,
  fontSize: 16,
  titleColor: 'rgba(0,0,0,1)',
  descFontSize: 14,
  descColor: 'rgba(235,235,235,1)',
  cardBackground: { backgroundColor: "rgba(255,255,255,1)" },
  cardBoxshadow: '0px 2px 4px 0px rgba(0,0,0,0.12)',
  textAlign: 'left',
  position: 'left',
  view: 'standard',
  lineBackground: 'rgba(255,255,255,1)',
}

export const propsSchema = createInbizSchema({
  attribute: {
    ...createBaseSchema(
      {
      },
      undefined,
      true,
    ),
    navigation_config: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        'x-component-props': {
          type: 'object',
          properties: {
            fontSize: { // 名称字号
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                min: 12,
                max: 72,
              },
            },
            titleColor: { // 名称字色
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'ColorInput',
              'x-component-props': {
                defaultValue: 'rgba(0,0,0,1)'
              },
            },
            descFontSize: { // 描述字号
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                min: 12,
                max: 72,
                defaultValue: 14
              },
            },
            descColor: { // 描述字色
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'ColorInput',
              'x-component-props': {
                defaultValue: 'rgba(235,235,235,1)'
              },
            },
            textAlign: { // 文字对齐
              type: 'string',
              enum: ['left', 'right', 'center'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              'x-component-props': {
                defaultValue: 'center'
              },
            },
            position: { // 图标位置
              type: 'string',
              enum: ['', 'top', 'right', 'bottom', 'left'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              'x-component-props': {
                defaultValue: 'left'
              },
            },
            showType: { // 宽度显示
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Radio.Group',
              enum: ['grid', 'flex'],
              'x-component-props': {
                min: 50,
                addonAfter: 'px',
                defaultValue: 'grid',
              },
            },
            rowCount: { // 列数
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                min: 1,
              },
              'x-reactions': {
                dependencies: ['.showType'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] == 'flex'}}",
                  },
                },
              },
            },
            itemWidth: { // 卡片宽度
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                min: 50,
                addonAfter: 'px',
              },
              'x-reactions': {
                dependencies: ['.showType'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] == 'grid'}}",
                  },
                },
              },
            },
            colHeight: { // 卡片高度
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                addonAfter: 'px',
                min: 1,
              },
            },
            radius: { // 卡片圆角
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                addonAfter: 'px',
                min: 1,
              },
            },
            horizontalGutter: { // 横向间距
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                addonAfter: 'px',
                min: 1,
              },
            },
            verticalGutter: { // 竖向间距
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                addonAfter: 'px',
                min: 1,
              },
            },
            cardBackground: { // 卡片背景
              'x-component': 'BackgroundStyleSetter',
              'x-component-props': {
                current: true
              },
            },
            cardBoxshadow: { // 卡片阴影
              'x-component': 'BoxShadowStyleSetter',
              'x-component-props': {
                current: true
              },
            },
            cardBorder: { // 卡片边框
              'x-component': 'BorderStyleSetter',
              'x-component-props': {
                current: true
              },
            },
            hoverBackground: { // hover背景
              'x-component': 'BackgroundStyleSetter',
              'x-component-props': {
                current: true
              },
            },
            hoverBoxshadow: { // hover阴影
              'x-component': 'BoxShadowStyleSetter',
              'x-component-props': {
                current: true
              },
            },
            navList: { // 导航配置(Web)
              type: 'array',
              'x-decorator': 'FormItem',
              'x-component-props': {
                config: {
                  // 标题
                  title: true,
                  // 选择图标
                  icon: true,
                  describe: true,
                  // borderColor: true,
                  // borderWidth: true,
                  // borderShadow: true,
                  // blockBackgroundColor: true,
                  // titleColor: true,
                  externalAddress: true,
                  linkAddress: true,
                  page: true,
                  parameter: true,
                  cardStyle: true,
                  nameFontSize: true,
                  nameColor: true,
                  describeFontSize: true,
                  describeColor: true,
                  cardBackground: true,
                  cardBoxshadow: true,
                  cardBorder: true,
                  hoverBackground: true,
                  hoverBoxshadow: true,
                },
                // 新建时表单默认值
                default: {
                  title: '',
                  describe: '',
                  parameter: '',
                  cardStyle: false,
                  nameFontSize: 16,
                  nameColor: 'rgba(0,0,0,1)',
                  describeColor: 'rgba(235,235,235,1)',
                  describeFontSize: 14,
                  cardBackground: {
                    backgroundColor: "rgba(255,255,255,1)"
                  },
                  cardBoxshadow: '0px 2px 4px 0px rgba(0,0,0,0.12)',
                  cardBorder: undefined,
                  hoverBackground: {
                    backgroundColor: "rgba(245,245,245,1)"
                  },
                  hoverBoxshadow: '0px 2px 4px 0px rgba(0,0,0,0.12)',
                },
              },
              'x-component': 'DataSource',
            },
          },
        },
      },
    },
  },
  style: {
    ...createComponentStyleSchema({
      ...createBizStyleSchema({}, {}),
    }),

    ...createDecoratorStyleSchema(),
  },
  controller: createControllerSchema({
    events: [
      {
        name: "onclick",
        label: "点击导航单项",
      },
    ]
  })
});

export const h5PropsSchema = createInbizSchema({
  attribute: {
    group_viewType: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        'x-component-props': {
          type: 'object',
          properties: {
            view: {
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              enum: ['standard', 'filter', 'grid'],
              'x-reactions': [
                {
                  target: 'form.attribute.navigation_config.x-component-props.contentType',
                  when: "{{$self.value == 'standard'}}",
                  fulfill: {
                    schema: {
                      enum: [1, 2, 3],
                    },
                  },
                },
                {
                  target: 'form.attribute.navigation_config.x-component-props.contentType',
                  when: "{{$self.value == 'filter'}}",
                  fulfill: {
                    schema: {
                      enum: [1, 2],
                    },
                  },
                },
                {
                  target: 'form.attribute.navigation_config.x-component-props.contentType',
                  when: "{{$self.value == 'grid'}}",
                  fulfill: {
                    schema: {
                      enum: [1, 2, 3, 4],
                    },
                  },
                },
              ],
            },
          },
        },
      },
      platform: 'wap',
    },
    ...createBaseSchema(
      {
      },
      undefined,
      true,
    ),
    navigation_config: {
      type: 'void',
      'x-component': 'CollapseItem',
      properties: {
        'x-component-props': {
          type: 'object',
          properties: {
            contentType: {
              type: 'object',
              enum: [1, 2, 3, 4],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
            },
            fontSize: { // 名称字号
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                min: 12,
                max: 72,
                addonAfter: 'px',
              },
              'x-reactions': {
                dependencies: ['.contentType'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{ $deps[0] == 3 }}",
                  },
                },
              },
            },
            titleColor: { // 名称字色
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'ColorInput',
              'x-component-props': {
                defaultValue: 'rgba(0,0,0,1)'
              },
              'x-reactions': {
                dependencies: ['.contentType'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{ $deps[0] == 3 }}",
                  },
                },
              },
            },
            descFontSize: { // 描述字号
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                min: 12,
                max: 72,
                defaultValue: 14
              },
              'x-reactions': {
                dependencies: ['.view', '.contentType'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] == 'standard' || $deps[0] == 'filter' || $deps[1] == 3 || $deps[1] == 4 }}",
                  },
                },
              },
            },
            descColor: { // 描述字色
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'ColorInput',
              'x-component-props': {
                defaultValue: 'rgba(235,235,235,1)'
              },
              'x-reactions': {
                dependencies: ['.view', '.contentType'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] == 'standard' || $deps[0] == 'filter' || $deps[1] == 3 || $deps[1] == 4 }}",
                  },
                },
              },
            },
            textAlign: { // 文字对齐
              type: 'string',
              enum: ['left', 'right', 'center'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              'x-component-props': {
                defaultValue: 'center'
              },
              'x-reactions': {
                dependencies: ['.view', '.contentType'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{ $deps[0] == 'standard' || $deps[0] == 'filter' || $deps[1] == 3 || $deps[1] == 4 }}",
                  },
                },
              },
            },
            position: { // 图标位置
              type: 'string',
              enum: ['', 'top', 'right', 'bottom', 'left'],
              'x-decorator': 'FormItem',
              'x-component': 'Select',
              'x-reactions': {
                dependencies: ['.view', '.contentType'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{ $deps[0] == 'standard' || $deps[0] == 'filter'|| $deps[1] != 1 }}",
                  },
                },
              },
              'x-component-props': {
                defaultProps: 'top'
              }
            },
            showType: { // 宽度显示
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'Radio.Group',
              enum: ['grid', 'flex'],
              'x-component-props': {
                min: 50,
                addonAfter: 'px',
                defaultValue: 'grid',
              },
              'x-reactions': {
                dependencies: ['.view'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] != 'grid'}}",
                  },
                },
              },
            },
            rowCount: { // 列数
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                min: 1,
                max: 5,
              },
              'x-reactions': {
                dependencies: ['.view', '.showType'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] != 'grid' || $deps[1] == 'flex'}}",
                  },
                },
              },
            },
            itemWidth: { // 卡片宽度
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                min: 50,
                addonAfter: 'px',
              },
              'x-reactions': {
                dependencies: ['.view', '.showType'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] != 'grid' || $deps[1] == 'grid'}}",
                  },
                },
              },
            },
            colHeight: { // 卡片高度
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                addonAfter: 'px',
                min: 1,
              },
              'x-reactions': {
                dependencies: ['.view'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] == 'standard' || $deps[0] == 'filter'}}",
                  },
                },
              },
            },
            radius: { // 卡片圆角
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                addonAfter: 'px',
                min: 1,
              },
              'x-reactions': {
                dependencies: ['.view'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] == 'standard' || $deps[0] == 'filter'}}",
                  },
                },
              },
            },
            horizontalGutter: { // 横向间距
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                addonAfter: 'px',
                min: 1,
              },
              'x-reactions': {
                dependencies: ['.view'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] == 'standard' || $deps[0] == 'filter'}}",
                  },
                },
              },
            },
            verticalGutter: { // 竖向间距
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                addonAfter: 'px',
                min: 1,
              },
              'x-reactions': {
                dependencies: ['.view'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] == 'standard' || $deps[0] == 'filter'}}",
                  },
                },
              },
            },
            lineHeight: {//行高
              type: 'number',
              'x-decorator': 'FormItem',
              'x-component': 'NumberPicker',
              'x-component-props': {
                addonAfter: 'px',
                min: 1,
                defaultValue: 44
              },
              'x-reactions': {
                dependencies: ['.view'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] == 'grid'}}",
                  },
                },
              },
            },
            cardBackground: { // 卡片背景
              'x-component': 'BackgroundStyleSetter',
              'x-component-props': {
                current: true
              },
              'x-reactions': {
                dependencies: ['.view'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] == 'standard' || $deps[0] == 'filter'}}",
                  },
                },
              },
            },
            lineBackground: { // 行内背景
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'ColorInput',
              'x-reactions': {
                dependencies: ['.view'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] == 'grid' || $deps[0] == 'filter'}}",
                  },
                },
              },
              'x-component-props': {
                defaultValue: 'rgba(255,255,255,1)'
              }
            },
            dropDownLineBackground: { // 下拉行内背景
              type: 'string',
              'x-decorator': 'FormItem',
              'x-component': 'ColorInput',
              'x-reactions': {
                dependencies: ['.view'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] == 'grid' || $deps[0] == 'standard'}}",
                  },
                },
              },
            },
            cardBoxshadow: { // 卡片阴影
              'x-component': 'BoxShadowStyleSetter',
              'x-component-props': {
                current: true
              },
              'x-reactions': {
                dependencies: ['.view'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] == 'standard' || $deps[0] == 'filter'}}",
                  },
                },
              },
            },
            cardBorder: { // 卡片边框
              'x-component': 'BorderStyleSetter',
              'x-component-props': {
                current: true
              },
              'x-reactions': {
                dependencies: ['.view'],
                fulfill: {
                  schema: {
                    'x-hidden': "{{$deps[0] == 'standard' || $deps[0] == 'filter'}}",
                  },
                },
              },
            },
            dataSource1: {
              type: 'array',
              'x-decorator': 'FormItem',
              'x-component': 'DataSource',
              'x-component-props': {
                config: {
                  // 标题
                  title: true,
                  // 标题只校验非空
                  titleOnlyRulesNull: true,
                  // 选择图标
                  icon: true,
                  describe: true,
                  externalAddress: true,
                  linkAddress: true,
                  page: true,
                  parameter: true,
                  cardStyle: true,
                  nameFontSize: true,
                  nameColor: true,
                  describeFontSize: true,
                  describeColor: true,
                  cardBackground: true,
                  cardBoxshadow: true,
                  cardBorder: true,
                  isWapNavigation: true,
                },
                // 新建时表单默认值
                default: {
                  title: '',
                  icon: { size: 24, color: 'rgba(0,0,0,1)', type: 'icon-ProcessLog' },
                  externalAddress: false,
                  blockBackgroundColor: 'rgba(255,255,255,1)',
                  linkAddress: '',
                  page: '',
                  nameFontSize: 16,
                  nameColor: 'rgba(0,0,0,1)',
                  describeFontSize: 14,
                  describeColor: 'rgba(235,235,235,1)',
                  cardStyle: false,
                  cardBackground: {
                    backgroundColor: "rgba(255,255,255,1)"
                  },
                  cardBoxshadow: '0px 2px 4px 0px rgba(0,0,0,0.12)',
                  cardBorder: undefined,
                },
              }
            },
          },
        },
      },
    },
  },
  style: {
    ...createComponentStyleSchema({
      ...createBizStyleSchema({}, {}),
    }),

    ...createDecoratorStyleSchema(),
  },
  controller: createControllerSchema({
    events: [
      {
        name: "onclick",
        label: "点击导航单项",
      },
    ]
  })
});

export const defaultBehavior = {
  name: 'Navigation',
  extends: ['Field'],
  selector: (node: any) => node.props['x-component'] === 'Navigation',
  designerProps: { propsSchema },
  designerLocales: locale,
};

export const h5DefaultBehavior = {
  name: 'Navigation',
  extends: ['Field'],
  selector: (node: any) => node.props['x-component'] === 'Navigation',
  designerProps: { propsSchema: h5PropsSchema },
  designerLocales: locale,
};

export const resource = {
  icon: 'Navigation',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'string',
        title: {
          value: 'Navigation.title',
          status: true,
        },
        'x-decorator': 'Container',
        'x-component': 'Navigation',
        'x-component-props': defaultProps,
      },
    },
  ],
};

export const h5Resource = {
  icon: 'Navigation',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'string',
        title: {
          value: 'Navigation.title',
          status: true,
        },
        'x-decorator': 'Container',
        'x-component': 'Navigation',
        'x-component-props': defaultH5Props,
      },
    },
  ],
};